<template>
	<view class="item">
		<view class="item_top l-f l-row-sb l-col-start">
			<view class="l-f">
				<image class="item_top_avatar" :src="options.avatar" mode=""></image>
				<view class="item_top_user">
					<view class="item_top_user_name">{{options.realname ? options.realname : '--'}}</view>
					<view class="l-f l-wrap">
						<view class="item_top_user_tag">个人账号</view>
						<view class="item_top_user_tag">子管理员</view>
					</view>
				</view>
			</view>
			<view class="item_top_more">更多</view>
		</view>
		<view class="item_bottom l-f l-wrap">
			<view class="item_bottom_item l-f">
				<view class="item_bottom_item_dot" style="background-color: #DEF1E4;"></view>
				<view class="item_bottom_item_value">账号状态: 正常</view>
			</view>
			<view class="item_bottom_item l-f">
				<view class="item_bottom_item_dot l-f l-row-c" style="background-color: #D7E7FE;">
					<uni-icons type="auth-filled" color="#4591FE" size="24rpx"></uni-icons>
				</view>
				<view class="item_bottom_item_value">工号: {{options.workNo ? options.workNo : '--'}}</view>
			</view>
			<view class="item_bottom_item l-f">
				<view class="item_bottom_item_dot" style="background-color: #D7E7FE;"></view>
				<view class="item_bottom_item_value">职位: 管企处CXY主管</view>
			</view>
			<view class="item_bottom_item l-f">
				<view class="item_bottom_item_dot" style="background-color: #FFF3DA;"></view>
				<view class="item_bottom_item_value">手机号: {{options.phone ? options.phone : '--'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Object,
				default: function() {
					return {}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		height: 300rpx;
		margin-top: 20rpx;
		box-shadow: 0 10rpx 10rpx 0rpx rgba(0, 0, 0, .1);
		&_top {
			border-bottom: 1rpx solid #eeeeee;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			&_avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
			&_user {
				margin-left: 20rpx;
				&_name {
					font-size: 28rpx;
					color: #000000;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				&_tag {
					background-color: #DEF1E4;
					padding: 4rpx 15rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #47AE69;
					margin-right: 20rpx;
					box-sizing: border-box;
				}
			}
			&_more {
				background-color: #C9DFFF;
				font-size: 24rpx;
				color: #4591FE;
				padding: 5rpx 15rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}
		}
		&_bottom {
			padding-top: 20rpx;
			box-sizing: border-box;
			&_item {
				width: 50%;
				&_dot {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #eeeeee;
				}
				&_value {
					margin-left: 15rpx;
					font-size: 26rpx;
					color: #333333;
					line-height: 56rpx;
				}
			}
		}
	}
</style>